<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地" />
		<title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link th:href="@{/asserts/bootstrap-3.4.1/css/bootstrap.min.css}" rel="stylesheet">
		<!-- 引入jQuery核心js文件 -->
		<script th:src="@{/asserts/javascript/jQuery-1.12.4.js}"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script th:src="@{/asserts/bootstrap-3.4.1/js/bootstrap.min.js}"></script>


		<link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
		<link th:href="@{/asserts/css/common.css}" rel="stylesheet" />
		<link th:href="@{/asserts/css/top.css}" rel="stylesheet" />
		<link th:href="@{/asserts/css/foot.css}" rel="stylesheet" />

		<link th:href="@{/asserts/css/cart.css}" rel="stylesheet" />
		<script th:src="@{/asserts/javascript/cart.js}"></script>

	</head>

	<body>
		<!--  最顶部的导航栏 -->
		<div th:replace="~{commons/tag::topNav}"></div>
		<!--  =================== head =============================== -->
		<div th:replace="~{commons/tag::headerNav}"></div>

		<!-- ==================== 购物车 ==================== -->
		<div class="container no-padding book-detail-bg">
		</div>

		<div class="index mt50">
			<div class="container no-padding">
				<span class="cart-name">我的购物车</span>
			</div>
		</div>

		<div class="container no-padding">

			<table class="table mt10">
				<tr>
					<td>
						<div class="checkbox">
							<label>
								<input class="all" type="checkbox"> 全选
							</label>
						</div>
					</td>
					<td>
						<div class="checkbox">
							书籍封面
						</div>
					</td>
					<td>
						<div class="checkbox">
							书籍名称
						</div>
					</td>
					<td>
						<div class="checkbox">
							单价
						</div>
					</td>
					<td>
						<div class="checkbox">
							数量
						</div>
					</td>
					<td>
						<div class="checkbox">
							小计
						</div>
					</td>
					<td>
						<div class="checkbox">
							操作
						</div>
					</td>
				</tr>
				<tr th:each="item : ${cart}">
					<td>
						<input name="bookId"  class="goods" type="checkbox" th:id="|bookId_${item.bookid}|" th:value="${item.bookid}">
					</td>
					<td>
						<img th:src="|http://localhost:10001/${item.imgsrc}|" alt="图片" />
					</td>
					<td th:text="${item.bookname}">
						JAVA核心技术卷I
					</td>
					<td class="price" th:text="${item.price}">
						20.56
					</td>
					<td>
						<div class="input-group">
							<span class="input-group-addon glyphicon glyphicon-minus" th:onclick="|minusCartCount(${item.bookid})|"></span>
							<input type="text" th:id="|buycount_${item.bookid}|" th:onchange="|modifyCartCount(${item.bookid})|" class="form-control buy-count" maxlength="3" th:value="${item.bcount}" >
							<span class="input-group-addon glyphicon glyphicon-plus" th:onclick="|addCartCount(${item.bookid})|"></span>
						</div>
					</td>
					<td class="total-price" th:text="${item.sumprice}">
						20.56
					</td>
					<td>
						<a href="javascript:void(0)" th:onclick="|del(${item.bookid})|"  class="btn btn-danger remove">删除</a>
					</td>
				</tr>

				<tr id="last-tr">
					<td colspan="7" class="no-padding">

						<a th:href="@{/book/index}">继续购物</a>
						|
						已选择 <span class="choic-num">0</span> 件
						|
						<a href="javascript:void(0)" onclick="delBatchCart()">删除所选项</a>
						|
						<a href="javascript:void(0)" onclick="clearCart()">清空购物车</a>

						<a href="javascript:void(0)" class="buy btn btn-danger fr ml10" onclick="cal()">
							去结算
						</a>
						<span class="fr ">合计 : <i class="total">0</i> 元</span>
					</td>
				</tr>
			</table>

		</div>
		<script th:inline="javascript">
			//结算函数
			function cal(){
				//1. 获取所有的选中的商品
				let cs = $("input[name=bookId]:checked");
				if (cs.length > 0){
					let params = '';
					cs.each(function (){
						//console.log($(this).val())
						params += "bids="+$(this).val()+"&" ;
					})
					// bid=1&bid=4   "+params.substring(0,params.length-1);
					baseUrl = /*[[@{/}]]*/ ;
					location.href = baseUrl + "cart/calCart?"+params.substring(0,params.length-1); ;
				}else {
					alert("请至少选中一个吗？");
					return ;
				}
			}
			function delBatchCart(){
				let cs = $("input[name=bookId]:checked");
				let bookIds = [] ;
				if (cs.length > 0) {
					if (confirm('确认删除吗？')){
						cs.each(function (){
							bookIds.push($(this).val())
						})
						console.log(bookIds);
						//把数组传递到后台
						let baseUrl = /*[[@{/}]]*/ ;
						let url = baseUrl + "cart/delBatchCart";
						$.ajax({
							url:url ,
							type:'post',
							dataType:'text',
							data:{
								bookIds:bookIds
							},
							success(res){
								console.log(res)
								if (res == '1') {
									location.reload();
								}else {
									alert("删除失败!");
								}
							}
						});
					}
				}else {
					alert("请至少选一个吗？");
					return ;
				}
			}


			function clearCart(){
				if (confirm('确认要清空吗 ？')) {
					let baseUrl = /*[[@{/}]]*/ ;
					let url = baseUrl + "cart/clearCart";
					$.get(url,function (res){
						if (res == '1') {
							location.reload() ;//刷新本页面
						}
					})
				}
			}


			function del(bid){
				if (confirm('确认要删除吗？')){
					let baseUrl = /*[[@{/}]]*/ ;
					let url = baseUrl + "cart/delCart?bookId="+bid
					$.get(url,function (res){
						if (res == '1') {
							location.reload() ;//刷新本页面
						}
					})
				}
			}

			function addCartCount(bid){
				let count = $("#buycount_"+bid).val();
				let newCount = parseInt(count)+1;
				$("#buycount_"+bid).val(newCount);
				//alert(bid +"----"+newCount);
				//验证数字的合法性
				let baseUrl = /*[[@{/}]]*/ ;
				let url = baseUrl + "cart/modifyCart?bookId="+bid +"&buyCount="+newCount ;
				$.get(url,function (res){
					if (res == '1') {
						location.reload() ;//刷新本页面
					}
				})
			}

			function minusCartCount(bid){
				let count = $("#buycount_"+bid).val();
				let newCount = parseInt(count)-1 ;
				$("#buycount_"+bid).val(newCount);
				//alert(bid +"----"+newCount);
			}

			function modifyCartCount(bid){
				let count = $("#buycount_"+bid).val();
				//alert(bid + "----"+count);
			}

		</script>

		<!-- =============== 最后的网站底部 =============== -->
		<div th:replace="~{commons/tag::footer}"></div>
	</body>
	
</html>
